<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <div class="logo"><i class="iconfont iconnew"></i></div>
      <router-link to="/search" class="search">
        <i class="iconfont iconsearch"></i>
        <span>搜索新闻</span>
      </router-link>
      <div @click="LoginFn" class="user">
        <i class="iconfont iconwode"></i>
      </div>
    </div>
    <!-- //主体 -->
    <!-- home-tabs添加 + 伪元素 -->
    <van-tabs v-model="active" sticky swipeable class="home-tabs">
      <van-tab :title="item.name" v-for="item in list" :key="item.id">
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
            <ul>
              <li v-for="item2 in item.postlist" :key="item2.id">
                <!-- {{ item2.title}} -->
                <Mynew :news="item2"></Mynew>
              </li>
            </ul>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getToken } from "../utils/tokenData.js";
import { getColumnListAPI } from "../apis/index";
import { getPostAPI } from "../apis/news.js";
import { getCate} from "../utils/tokenData.js";
// 复用组件
import Mynew from "../components/Mynew";
export default {
  mounted() {
    const tabs = document.querySelector(".van-sticky");
    tabs.addEventListener("click", (e) => {
      console.dir(e.target);
      if (e.target.className.indexOf("van-sticky") !== -1) {
        console.log("你点击了加号，跳转到栏目页");
        // 🔔 跳转到栏目管理页
        this.$router.push({ path: "/category" });
      } else {
        console.log("点击了栏目");
      }
    });
    //
  },
  data() {
    return {
      active: getToken() ? 1 : 0,
      list:getCate(),
    };
  },
  async created() {
    //如果没有栏目记录则发送请求，让所有栏目显示
    if (this.list.length === 0) {
      const res = await getColumnListAPI();
      this.list = res.data.data;
    } else {
      if (getToken()) {
        //如果有栏目记录，同时也登录，则添加关注和头条栏目
        this.list.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
      } else {
        this.list.unshift(
          //没有登录就只显示头条
          { id: 999, name: "头条", is_top: 1 },
        );
      }
    }
    this.list= this.list.map((v) => {
      return {
        ...v, //剩余参数
        postlist: [],
        pageIndex: 2, //每个栏目都有页码
        pageSize: 1, //每个栏目都有页容量
        loading: false, //loadin=ture,显示为加载中，不会触发onLoad事件
        finished: false, //finished=ture,显示为没有更多了，不会触发onLoad事件，级别比loading高
        isLoading: false,
      };
    });
    // this.getPostListData();
  },
  watch: {
    async active() {
      console.log("active下标变化", this.active);
      // console.log(this.list);
      this.list[this.active].postlist.length == 0 && this.getPostListData();
    },
  },
  methods: {
    LoginFn() {
      const hmttID = localStorage.getItem("hmttID");
      if (hmttID) {
        this.$router.push({
          path: "/user",
          query: {
            id: hmttID,
          },
        });
        console.log("跳转到个人中心");
      } else {
        // console.log('跳转到登录中心');
        this.$router.push({
          path: "/login",
        });
      }
    },
    async getPostListData() {
      //当前栏目
      //把里面id赋值为activeCateId
      const {
        id: activeCateId,
        pageIndex,
        pageSize,
        postlist,
      } = this.list[this.active];
      const res2 = await getPostAPI({
        category: activeCateId,
        pageIndex,
        pageSize,
      });
      if (res2.data.data.length === 0) {
        this.list[this.active].finished = true;
      }
      // this.newsList = res2.data.data;
      postlist.push(...res2.data.data);
      this.list[this.active].loading = false;
    },
    //下拉
    onLoad() {
      // console.log("列表即将滚动到底部");
      this.list[this.active].pageIndex++;
      this.getPostListData();
    },
    //下拉
    onRefresh() {
      //当上拉刷新后，数组清零，展示的页码也清零，加载完成状态改变
      console.log("下拉");
      this.list[this.active].postlist = [];
      this.list[this.active].pageIndex = 1;
      this.list[this.active].finished = false;
      //  Toast('刷新成功');
      this.list[this.active].loading = true;
      this.getPostListData();
      this.list[this.active].isLoading = false;
    },
  },
  components: {
    Mynew,
  },
};
</script>

<style lang="less" scoped>
.home-tabs {
  // 在 tabs 标签栏上右侧添加一个图标，用于进入栏目管理页面
  /deep/ .van-sticky {
    padding-right: 40px;
    &::after {
      content: "+";
      position: absolute;
      right: 0;
      top: 0;
      font-size: 30px;
      width: 45px;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }
  }
}
.header {
  height: 50px;
  background-color: #ff0000;
  color: #fff;
  display: flex;
  align-items: center;
  .logo {
    width: 70px;
    text-align: center;
    padding-top: 20px;
    .iconnew {
      font-size: 50px;
    }
  }

  .search {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.4);
    height: 34px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconsearch {
      margin-right: 5px;
      margin-top: 4px;
    }
  }

  .user {
    width: 70px;
    text-align: center;
    color: #fff;
    .iconwode {
      font-size: 30px;
    }
  }
}
</style>